<template>
    <view class="main">
        <view class="header" :style="{ height: header_height + 'px', 'background-color': bgColor }">
            <view class="w-full" :style="{ height: safeAreaTop + 'px'}"></view>
            <view class="header_text" :style="{ height: defaultTopHeight + 'px'}">
                {{app_name}}
            </view>
        </view>
        <view class="content">
            <scroll-view scroll-y class="scroll-box" @scrolltolower="scrolltolower" @scroll="scroll"
                :scroll-top="scrollTop">
                <view class="safeTop" :style="{ height: header_height + 'px' }"></view>
                <view class="content_body">
                    <view class="full">
                        <uv-notice-bar text="严正声明：全新手机租赁服务暂不对18岁及以下用户提供，建议您理性消费!" speed="100" duration="2000"
                            :color="app.globalData.primaryColor"></uv-notice-bar>
                    </view>
                    <uv-search v-model="searchValue" @search="search" @custom="search" bgColor="white"
                        :showAction="true" placeholder="猜你想搜：iphone15" actionText="搜索" :animation="true"></uv-search>
                    <Grid :lists="dataInfo?.cate" @click="gridOnclick" />
                    <!-- <uni-swiper-dot :info="data.banner" :current="current" field="content" mode="default" class="w-full"> -->
                    <swiper class="swiper-box" @change="change" autoplay circular>
                        <swiper-item v-for="(item, index) in dataInfo?.banner" :key="index">
                            <img class="nut-swiper-img" :src="item.img" @click="toOtherPage(item.rule)" />
                        </swiper-item>
                    </swiper>
                    <!-- </uni-swiper-dot> -->
                    <view class="box">
                        <uv-tabs :list="tabs" :current="tabsIndex" keyName="text" :lineColor="app.globalData.primaryColor"
                            @change="tabsChange" :activeStyle="activeStyle"></uv-tabs>
                    </view>
                    <goodsList ref="goodsListRef" :defaultRequest="false" />
                </view>
                <view @click="backToTop">
                    <uv-back-top :scroll-top="scrollTop" bottom="60"></uv-back-top>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
import { onReachBottom, onPullDownRefresh, onPageScroll, onLoad } from '@dcloudio/uni-app';
import {
    ref,
    nextTick,
    toRaw,
} from 'vue'
const app = getApp()
const goodsListRef = ref(null)
const indexStorage = uni.getStorageSync('indexStorage')
console.log(indexStorage);
const firstLoading = ref(indexStorage?.indexStorage || true)
const dataInfo = ref(indexStorage?.dataInfo || {})
const app_name=ref(indexStorage?.shop_info?.app_name||'')
const tabsIndex = ref(0)
const activeStyle = {
    color: '#303133',
    fontWeight: 'bold',
    transform: 'scale(1.05)'
}
const tabs = ref(indexStorage?.tabs || [])
const tabsDefault = [{
    id: 0,
    ishome: -1,
    text: "首页推荐",
}]
const cateids = ref(0)
const setLists = () => {
    goodsListRef.value?.setLists(toRaw(dataInfo.value?.home_goods))
}
const getData = (callback) => {
    app.get('index/getshopindex').then(res => {
        firstLoading.value = false
        dataInfo.value = res
        tabs.value = tabsDefault.concat(res?.cate_bottom)
        app_name.value = res.shop_info.app_name
		app.globalData.primaryColor = res.shop_info.app_color
        uni.setTabBarStyle({
            selectedColor: res.shop_info.app_color,
        })
        uni.setStorageSync("phoneNumber", res.shop_info.miniprogram_phone);
        uni.setStorage({
            key: "indexStorage", data: {
                dataInfo: dataInfo.value,
                tabs: tabs.value,
                firstLoading: false,
                app_name: res.shop_info.app_name,
            }
        });
        setTimeout(() => {
            tabsIndex.value == 0 && setLists()
        }, 500);
        callback && callback()
    }).catch(error => {
        firstLoading.value = false
        callback && callback()
    })
}
const scrolltolower = () => {
    goodsListRef.value.getData({ cateids: cateids.value })
}
const defaultTopHeight = ref(40)
const header_height = ref(defaultTopHeight.value)
const safeAreaTop = ref(0)
onLoad(() => {
    console.log(uni.getSystemInfoSync());
    const { height, top } = uni.getMenuButtonBoundingClientRect()
    header_height.value = height + top
    safeAreaTop.value = top
    defaultTopHeight.value = height
    tabsIndex.value == 0 && setLists()
    getData()
})
onPullDownRefresh(() => {
    app.vibrate()
    setTimeout(() => {
        getData(uni.stopPullDownRefresh)
        tabsIndex.value == 0 ? setLists() : goodsListRef.value.search({ cateids: cateids.value })
    }, 300);
})
onReachBottom(() => {
    scrolltolower()
})
const scrollTop = ref(0)
const bgColor = ref('')
onPageScroll((e) => {
    scrollTop.value = e?.scrollTop;
    setBgColor()
})
const scroll = (e) => {
    scrollTop.value = e?.detail.scrollTop;
    setBgColor()
}
const setBgColor=()=>{
    const top = scrollTop.value / header_height.value
    bgColor.value = uni.$uv.colorToRgba(dataInfo.value.shop_info.app_bg_color, top * 0.6)
}
const backToTop = () => {
    scrollTop.value = 0;
}
const toGoodsLists = (value, val) => {
    uni.navigateTo({
        url: '/pages/goodsLists/goodsLists' + uni.$uv.queryParams(value),
        success: function (res) {
            // 通过eventChannel向被打开页面传送数据
            val && res.eventChannel.emit('setsearchValue', val)
        }
    })
}
const gridOnclick = function (value) {
    app.vibrate()
    toGoodsLists({ cateids: value.id }, value.text)
}
const toOtherPage = function (value) {
    app.vibrate()
}

const searchValue = ref(null)
const search = function () {
    app.vibrate()
    if (searchValue.value) {
        toGoodsLists({ name: searchValue.value }, searchValue.value)
    }
};
const current = ref(0)
const change = function (e) {
    current.value = e.detail.current;
}
const tabsChange = (value) => {
    tabsIndex.value = value.index
    app.vibrate()
    cateids.value = value.id
    if (value.id == tabs.value[0].id) {
        setLists()
    } else {
        goodsListRef.value.search({ cateids: value.id })
    }
}
</script>

<style lang="scss" scoped>
page {
    height: 100%;
}

.main {
    height: 100%;
}

.header {
    width: 100%;
    padding-bottom: 10px;
    position: fixed;
    background-color: transparent;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
.header_text{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.safeTop{
    background: linear-gradient(to bottom, white , transparent);
}
.content {
    height: 100%;
    //margin-top: 44px;
    //margin-bottom: var(--tab-bar-height, 50px);
}

::v-deep {
    .uv-navbar {
        height: 44px;
    }
}
</style>

<style lang="scss" scoped>
.h-full>uni-view {
    height: 100%;
}

.full {
    width: 100%;
    height: 100%;
    overflow: auto;

    &>uni-scroll-view {
        height: 100%;
    }
}

::v-deep {
    .nut-skeleton {
        width: -webkit-fill-available;
        padding: 10px;
        height: 100%;
    }
}

.content_body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;

    ::v-deep.nut-tab-pane {
        padding: 0 !important;
        margin-top: 10px !important;
        background-color: transparent !important;
    }

    ::v-deep.nut-tabs__content {
        display: none;
    }
}


.text-area {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 36rpx;
    color: #8f8f94;
}

.uni-swiper__warp,
.swiper-box {
    width: 100%;
    height: 100px;
    border-radius: $uni-border-radius-lg;
}

::v-deep.uni-swiper-wrapper,
.nut-swiper-img {
    width: 100%;
    height: 100%;
    border-radius: $uni-border-radius-lg;
}

.nut-swiper-img:active {
    transform: scale(0.98);
}
</style>